<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../../static/css-tuangou/register.css"/>
    <link rel="stylesheet" type="text/css" href="../../static/css-tuangou/alert.css"/>
</head>
<!--导航条-->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">

        <div class="navbar-header">
            <a href="le-index.html" class="navbar-brand">
                <span class="glyphicon glyphicon-home le-text"></span>
                <span class="le-text">乐购商城</span>
            </a>

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#le-nav">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

        </div>

        <div class="navbar-collapse collapse" id="le-nav">
            <ul class="navbar-nav nav hidden-xs">
                <li><a href="">乐购 惊喜 盛大开业 欢迎来购</a></li>
            </ul>

            <ul class="navbar-nav nav navbar-right">
                <li><a href="le-index.html">关于乐购</a></li>
                <li><a href="le-mygroupbying.html">我的拼团</a></li>
                <li><a href="le-cart.html">购物车</a></li>
                <li><a href="le-balance.html">充值</a></li>
                <li><a href="le-list.html">用户信息</a></li>


                <!-- 当没有登录时 点击会跳转到登录页面 -->

                <!-- 下拉列表阻止a超链接的默认行为 -->
                <li class="dropdown">
                    <a data-toggle="modal" data-target="#loginModal" class="dropdown-toggle" id="le-login">登录</a>
                    <!-- 下拉菜单 -->
                    <ul class="dropdown-menu">
<!--                        <li><a href="le-personal.html">个人中心</a></li>-->
<!--                        <li><a href="" id="update-pwd" data-toggle="modal" data-target="#bt-modal2">修改密码</a></li>-->
                        <li><a href="" id="le-user-logout" data-toggle="modal" data-target="#bt-modal">退出</a></li>
                    </ul>
                </li>
                <li><a data-toggle="modal" data-target="#registerModal">注册</a></li>
            </ul>
        </div>
    </div>
</nav>
<!--注册模态框-->
<div class="modal fade" id="registerModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">用户注册</h4>
            </div>
            <div class="modal-body">
                <form action="" method="post" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-2 control-label le-text">账号：</label>
                        <div class="col-md-6">
                            <input type="text" name="username" id="username" class="form-control"/>
                        </div>
                        <div class="col-4">
                            <p style="color: #c50e1b" id="usernameMsg"></p>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-2 control-label le-text">密码：</label>
                        <div class="col-md-6">
                            <input type="password" name="password" id="password" class="form-control"/>
                        </div>
                        <div class="col-4">
                            <p style="color: #c50e1b" id="passwordMsg"></p>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-2 control-label le-text">手机号：</label>
                        <div class="col-md-6">
                            <input type="text" name="phone" id="phone" class="form-control"/>
                        </div>
                        <div class="col-4">
                            <p style="color: #c50e1b" id="phoneMsg"></p>
                        </div>
                    </div>

                    <!--                        <div class="form-group">-->
                    <!--                            <label class="col-md-2 control-label le-text">验证码：</label>-->
                    <!--                            <div class="col-md-6">-->
                    <!--                                <div class="input-group">-->
                    <!--                                    <input type="text" name="code" id="captcha" class="form-control"/>-->
                    <!--                                    <div class="input-group-btn">-->
                    <!--                                        <img src="/legou/captcha" id="captchaImg" width="120" height="36">-->
                    <!--                                    </div>-->
                    <!--                                </div>-->
                    <!--                            </div>-->
                    <!--                            <div class="col-4">-->
                    <!--                                <p style="color: #c50e1b" id="captchaMsg"></p>-->
                    <!--                            </div>-->
                    <!--                        </div>-->

                    <div class="form-group">
                        <div class="col-md-6 col-md-offset-2">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" id="le-user-register" class="btn btn-danger">注册</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="loginModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">用户登录</h4>
            </div>
            <div class="modal-body">
                <form action="" method="post" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-2 control-label le-text">手机号：</label>
                        <div class="col-md-6">
                            <input type="text" id="loginPhone" class="form-control" placeholder="默认手机号：123"/>
                        </div>
                        <div class="col-4">
                            <p style="color: #c50e1b" id="loginPhoneMsg"></p>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-2 control-label le-text">密码：</label>
                        <div class="col-md-6">
                            <input type="password" id="loginPassword" class="form-control" placeholder="默认密码：123"/>
                        </div>
                        <div class="col-4">
                            <p style="color: #c50e1b" id="loginPasswordMsg"></p>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-6 col-md-offset-2">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" id="le-user-login" class="btn btn-danger">登录</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>



</body>

<script type="application/javascript">

    // var urlHead = 'http://localhost:8086'

    /**
     * 注册
     */
    $("#le-user-register").click(function () {
        var formData = new FormData();
        formData.append('username', $('#username').val());
        formData.append('password', $('#password').val());
        formData.append('phone', $("#phone").val());

        $.ajax({
            type: 'POST',
            url: '/tbUser/register', // 修改为注册请求路径
            data: formData,
            processData: false,
            contentType: false,
            success: function (json) {
                if (json.code === -1) { // 请求未成功发送到服务器
                    $('<div>').appendTo('body').addClass('alert alert-danger').html("请求未成功发送到服务器").show().delay(1000).fadeOut();
                } else if (json.code === 0) { // 注册成功
                    $('<div>').appendTo('body').addClass('alert alert-success').html("注册成功").show().delay(1000).fadeOut();
                    setTimeout(function () {
                        window.location.href = 'le-index.html'
                    }, 2500);
                } else { // 注册失败
                    $('<div>').appendTo('body').addClass('alert alert-danger').html(json.message).show().delay(1000).fadeOut();
                    $("#usernameMsg").html(json.data.errorMsg.username || "");
                    $("#passwordMsg").html(json.data.errorMsg.password || "");
                    $("#phoneMsg").html(json.data.errorMsg.phone || "");
                }
            },
            error: function (xhr, status, error) {
                // 处理其他类型的错误，比如网络错误等
                console.error(xhr.responseText);
            }
        });
    });


    /**
     * 登录点击事件
     */
    $("#le-user-login").click(function () {
        // var formData = new FormData();
        // formData.append('username', $('#loginUsername').val());
        // formData.append('password', $('#loginPassword').val());

        $.ajax({
            type: 'POST',
            url: '/tbUser/login', // 登录请求路径
            data: {
                phone: $("#loginPhone").val(),
                password: $("#loginPassword").val()
            },
            // processData: false,
            // contentType: false,
            success: function (json) {
                if (json.code === 0) { // 登录成功
                    $('<div>').appendTo('body').addClass('alert alert-success').html("登录成功").show().delay(1000).fadeOut();
                    setTimeout(function () {
                        window.location.href = 'le-index.html'
                    }, 2500);
                } else { // 登录失败
                    $('<div>').appendTo('body').addClass('alert alert-danger').html(json.message).show().delay(1000).fadeOut();
                    $("#loginPhoneMsg").html(json.data.errorMsg.phone);
                    $("#loginPasswordMsg").html(json.data.errorMsg.password);
                }
            },
            error: function (xhr, status, error) {
                // 处理其他类型的错误，比如网络错误等
                console.error(xhr.responseText);
            }
        });
    });


    /**
     * 从页面加载用户名
     */
    $(document).ready(function () {
        $.ajax({
            type: 'GET',
            url: '/tbUser/session',
            success: function (json) {
                if (json) {
                    // 在成功获取到用户信息后，将用户名显示在页面上
                    $("#le-login").html(json.username); // 假设用户名字段为 username
                    $("#le-login").removeAttr('data-toggle'); // 移除模态框
                    $("#le-login").removeAttr('data-target');
                    $("#le-login").attr('data-toggle', 'dropdown'); // 改成下拉列表显示
                }
            }
        });
    });


    /**
     * 退出登录
     */
    $("#le-user-logout").click(function () {
        $.ajax({
            type: "POST",
            url: '/tbUser/loginOut',
            success: function (json) {
                $('<div>').appendTo('body').addClass('alert alert-info').html("退出登录成功").show().delay(1000).fadeOut();
                setTimeout(function () {
                    window.location.href = "le-index.html";
                }, 2500);
            }
        });
    });
</script>

</html>